{% extends 'base.html' %}

{% block main_content %}

    <div class="row row-offcanvas row-offcanvas-right">
        <div class="col-xs-6 col-sm-2 sidebar-offcanvas" id="sidebar">
            <div class="list-group">
                <a href="javascript:" class="list-group-item" data-echarts-name="simpleBar">柱形图(Bar)</a>
                <a href="javascript:" class="list-group-item" data-echarts-name="simpleKLine">K线图(KLine)</a>
                <a href="javascript:" class="list-group-item" data-echarts-name="simpleMap">地图(Map)</a>
                <a href="javascript:" class="list-group-item" data-echarts-name="simplePie">饼图(Pie)</a>
                <a href="javascript:" class="list-group-item" data-echarts-name="wordCloud">词云(WordCloud)</a>
            </div>
        </div>
        <!--/.sidebar-offcanvas-->
        <div class="col-xs-12 col-sm-10">
            <p class="pull-right visible-xs">
                <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
            </p>
            <div class="alert alert-info" role="alert">前端渲染方式采用ajax方式从后台获取数据。切换左侧菜单，并不会改变页面URL。<br/>
            注意：在该示例中，所有配置均在前端 HTML 配置，不受 DJANGO_ECHAERTS 配置约束。<br/>
            当前配置：ECharts 3.8.5 +  canvas渲染</div>
            <div id="id_echarts_container" style="height: 500px;"></div>

        </div>
        <!--/.col-xs-12.col-sm-9-->


    </div>
{% endblock %}


{% block extra_script %}
    <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
    <script src="http://echarts.baidu.com/asset/map/js/china.js"></script>
    <script src="{{ STATIC_URL }}echarts/echarts-wordcloud.min.js"></script>
    <script type="text/javascript">
        var mChart;
        function loadEcharts(name) {
            var url = '/options/' + name + '/';
            if (mChart != null) {
                mChart.clear();
            }
            mChart = echarts.init(document.getElementById('id_echarts_container'));
            mChart.showLoading();
            $.ajax({
                url: url,
                type: "GET",
                data: null,
                dataType: "json"
            }).done(function (data) {
                mChart.hideLoading();
                mChart.setOption(data);
                console.log(data);
            });
        }
        $(document).ready(function () {
            $('a[data-echarts-name]').on('click', function () {
                var name = $(this).data('echartsName');
                loadEcharts(name);
            });
            loadEcharts('simpleBar');
        });
    </script>
{% endblock %}